<!-- 旅游攻略 -->
<script lang='ts' setup>
import { reactive, ref, } from 'vue'
import lunbotu from '../../hooks/photos'
import { useRouter } from 'vue-router'
import contentPanelVue from '../icons/contentPanel.vue';
import { axiosRequests } from "../../hooks/axiosRequest"
import type { userContent } from "../../types/write"
const { userget } = axiosRequests()
const router = useRouter()
const strategy = reactive({
    strategyShow: false,
    strategyNav: [
        { title: '国内地区', name: 'innerArea' },
        { title: '知名国外', name: 'overseas' },
        { title: '用户热榜', name: 'userHotRec' },
    ],
})
function goRouter(name: string) {
    strategy.strategyShow = true
    router.push({
        name: name
    })
}
//分页伪数据
let pages = ref<Array<userContent>>([])

//分页
const currentPage4 = ref(1)
const pageSize4 = ref(1)
const total = ref(2) //总页数

//计算页数 和异步请求 start 现在采用模拟的方式来获取数据
/* for (let i = 0; i < 6; i++) {

    pages.push({ title: 'hello world' + i, nickname: 'nickname', filesurl: new URL('../../assets/beautyLife/b2.jpg', import.meta.url).href, })
} */
//请求数据
getWriteData()
async function getWriteData() {
    const result = await userget('/email/writeArticle/getuploadContent', {})
    if (result.status === 1) {
        return
    }
    result.data.forEach((e: userContent) => {
        pages.value.push(e)
    });

    console.log("aaa", pages.value);

}
//end
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pages.value.length = 0//清空
    /**
     * 请求数据 
     * 
     * 
     */
    getWriteData()

}
//查看文章内容
function goWriteDetails(email: string, createtime: string) {
    window.open('indextwo.html?email=' + email + '&createtime=' + createtime);  //打开新的空白窗口
}
</script>
<template>
    <div id="strategy">
        <div class="strategy" @mouseleave="strategy.strategyShow = false">
            <div class="strategy_nav">
                <div>
                    <ul>
                        <li class="strategy_item" v-for="item in strategy.strategyNav"
                            @mouseenter="goRouter(item.name)">
                            {{ item.title }}
                            <el-icon style="float: right; color:  #27c4bc;">
                                <ArrowRight />
                            </el-icon>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="strategy_hover" v-show="strategy.strategyShow">
                <RouterView class="scrollStyle" />
            </div>
            <div class="strategy_show">
                <div class="showMain">
                    <el-carousel class="carousel" direction="vertical" :autoplay="false">
                        <el-carousel-item style="width: 100%;height: 492px; " v-for="item in lunbotu.strategy"
                            :key="item">
                            <img :src="item.src" alt="">
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="showFooter">
                    <div class="showFooter_item">
                        <img src="../../assets/dali/dl1.jpg" alt="">
                    </div>

                    <div class="showFooter_item">
                        <img src="../../assets/wuzhen/wz1.jpg" alt="">
                    </div>

                    <div class="showFooter_item">
                        <img src="../../assets/beautyLife/b2.jpg" alt="">
                    </div>

                </div>
            </div>
        </div>
    </div>
    <div id="write">
        <div>
            <span style="font-size: 24px;font-weight:500 ;">推荐游记&nbsp;</span>&lt;暂无数据支持&gt;
        </div>
        <div>
            <ul>
                <li class="contentSpan" v-for="list in pages">
                    <contentPanelVue :writeDetails="list" @click="goWriteDetails(list.email, list.createtime)"
                        :flagShow="false">
                        <template v-slot:cover>
                            <div class="cover" v-if="list.filesurl === '1' ? false : true">
                                <img :src="list.filesurl" alt="">
                            </div>
                        </template>
                    </contentPanelVue>
                </li>
            </ul>
        </div>
        <!--   分页框 -->
        <div class="demo-pagination-block" style="padding: 50px 0;">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :small="small"
                :hide-on-single-page="false" :disabled="disabled" :background="background"
                layout=" prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
<style lang='scss' scoped>
$hoverWidth: 808px; //列表悬浮 右边窗体宽度
$hoverHeight: 720px; //列表悬浮 右边窗体高度
$lunbotuWidth: 1180px; //轮播图宽度
$navlistWidth: 360px;

#write {
    margin: 50px auto;
    width: 1200px;
    height: 100%;

    .contentSpan {
        margin-top: 35px;
        width: 100%;
    }

    .cover {
        margin: auto;
        height: 205px;
        width: 260px;

        img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }
    }
}

#strategy {
    overflow: hidden;

    .strategy {
        display: flex;
        margin: auto;
        margin-top: 30px;
        width: $lunbotuWidth;
        height: $hoverHeight;

        .strategy_hover {
            position: absolute;
            margin-left: $navlistWidth;
            width: $hoverWidth+10px;
            height: $hoverHeight;
            background-color: rgb(255, 255, 255);
            box-shadow: 0px 4px 16px 4px rgb(0 0 0 / 6%);
            z-index: 9;
        }

        .strategy_nav {
            width: $navlistWidth;
            height: 100%;
            border-radius: 10px;
            box-shadow: 0px 4px 16px 1px rgb(0 0 0 / 6%);

            .strategy_item {
                padding: 18px;
                color: #333333;
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 0px;
                border-bottom: 1px solid rgba(59, 55, 55, 0.048);

                &:hover {
                    cursor: pointer;
                    background-color: rgb(248, 247, 247);
                }
            }
        }

        .strategy_show {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-left: 10px;
            width: $hoverWidth;
            height: 100%;

            .showMain {
                width: 100%;
                height: 492px;

                .carousel {
                    width: 100%;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 592px;
                        border-radius: 10px;
                    }
                }
            }

            .showFooter {
                display: flex;
                width: 100%;
                height: 200px;

                .showFooter_item {
                    flex: 1;
                    margin-left: 10px;
                    border-radius: 10px;

                    img {
                        border-radius: 10px;
                        width: 100%;
                        height: 100%;
                    }

                    //用于消除最左边的 边距
                    &:nth-child(1) {
                        margin-left: 0;
                    }
                }
            }
        }
    }
}
</style>
